import React, { useEffect, useRef, useState } from 'react'
import { useSearchParams, useNavigate } from 'react-router-dom'
import { Divider, Tag, List, Avatar, Input, Button, Modal, message } from 'antd';

import http from '../../api/request'
import './index.css'
function Index() {
  const navigate = useNavigate()
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [data, setData] = useState([])
  const [list, setList] = useState()
  const [hui, setHui] = useState()
  const [name, setName] = useState()
  const [huiId, setHuiId] = useState()
  const [type] = useSearchParams()
  const id = type.get('id')
  const getdata = () => {
    http.get(`/article/${id}`).then((res) => {
      console.log(res, 'res');
      if (res.status === 200) {
        setData(res.data)
      }
    })
  }
  useEffect(() => {
    getdata()
  }, [])
  const handList = (e) => {
    setList(e)
  }
  const handFa = () => {
    http.post('/discuss', {
      userId: 47529555,
      content: list,
      articleId: id

    }).then((res) => {
      console.log(res);
      if (res.status === 200) {
        getdata()
        setList('')
      }
    })
  }
  const handleOk = () => {
    http.post('/discuss', {
      userId: 47529555,
      content: hui,
      commentId: huiId,
      articleId: id

    }).then((res) => {
      console.log(res, '33333');
      if (res.status === 200) {
        getdata()
        setHui('')
        setIsModalOpen(false);
      }

    })
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const handListHui = (e) => {
    setHui(e)
  }

  return (
    <div className='conentx'>
      <h2 className='title'>{data.content}</h2>
      <p className='text'><span>发布时间：{data.createdAt}</span>
        &emsp;&emsp;<span>阅读数量：{data.viewCount}</span>
        &emsp;&emsp;
        {
          data.tags && data.tags.map((item, index) => {
            return <Tag color="red" key={index}>{item.name}</Tag>
          })

        }
      </p>
      <p className='next'>{data.title}</p>
      <Divider orientation="left">评论 : ({data.comments?.length || 0})</Divider>
      <List
        itemLayout="horizontal"
        dataSource={data.comments}
        renderItem={(item, index) => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
              title={<div>
                <span>{item.user?.username}</span>
                &emsp;
                <span>{item.user?.createdAt}</span>
              </div>}
              description={
                <div>
                  <div dangerouslySetInnerHTML={{ __html: item.content }} />
                  {
                    item.replies.length > 0 && item.replies && (
                      <div>
                        <span>回复:</span>
                        {
                          item.replies.map((item, index) => {
                            return <List.Item.Meta
                              key={index}
                              avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
                              title={<div>
                                <span>{item.user?.username}</span>
                                &emsp;
                                <span>{item.user?.createdAt}</span>
                              </div>}
                              description={
                                <div dangerouslySetInnerHTML={{ __html: item.content }} />
                              }
                            />
                          })
                        }
                      </div>
                    )
                  }
                </div>
              }
            />
            <a onClick={() => {
              setIsModalOpen(true)
              setHuiId(item.id)
              setName(item.user?.username)
            }}>回复</a>
          </List.Item>
        )}
      />
      <Input.TextArea
        value={list}
        onChange={(e) => handList(e.target.value)}
      />
      <Button type="primary" onClick={handFa}>发表评论</Button>
      <Modal
        title={<div>回复 @{name}</div>}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        cancelText='取消'
        okText='确定'
      >
        <Input.TextArea
          value={hui}
          onChange={(e) => handListHui(e.target.value)}
        />
      </Modal>
    </div>
  )
}

export default Index
